<!--
 * @Author       : wfl
 * @LastEditors: ww
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-04-04 17:03:53
 * @LastEditTime: 2023-06-30 15:35:12
-->
<script setup lang="ts" name="FormPermission">
import { EPermissionType } from '@main/views/approve-workflow/enum'

const flowStore = useFlowStore()
const PermissionType = EPermissionType

const selectedNode = computed(() => flowStore.selectedNode)
const forms = computed(() => flowStore.designForm.widgetList)
forms.value?.forEach((f: any) => {
  f.permissionType ??= PermissionType.只读
})

if (
  !selectedNode.value?.permissions
  || selectedNode.value.permissions.length === 0
) {
  try {
    selectedNode.value.permissions = forms.value?.map((v: any) => {
      return {
        nodeId: selectedNode.value.id,
        widgetName: v.id || v.widgetLabel,
        ...v
      }
    })
  }
  catch (error) {

  }
}

const permission = ref('')
watch(
  () => permission.value,
  val => {
    selectedNode.value.permissions.forEach((v: any) => {
      v.permissionType = val
    })
  }
)
</script>

<template>
  <el-table :data="selectedNode.permissions" size="large" stripe>
    <el-table-column prop="options.label" label="表单字段" />
    <el-table-column prop="permissionType">
      <template #header>
        <el-radio v-model="permission" :label="PermissionType.可编辑">
          可编辑
        </el-radio>
      </template>
      <template #default="{ row }">
        <el-radio v-model="row.permissionType" :label="PermissionType.可编辑">
          <template #default>
            <span style="display: none;">.</span>
          </template>
        </el-radio>
      </template>
    </el-table-column>
    <el-table-column prop="permissionType">
      <template #header>
        <el-radio v-model="permission" :label="PermissionType.只读">
          只读
        </el-radio>
      </template>
      <template #default="{ row }">
        <el-radio v-model="row.permissionType" :label="PermissionType.只读">
          <template #default>
            <span style="display: none;">.</span>
          </template>
        </el-radio>
      </template>
    </el-table-column>
    <el-table-column prop="permissionType">
      <template #header>
        <el-radio v-model="permission" :label="PermissionType.隐藏">
          隐藏
        </el-radio>
      </template>
      <template #default="{ row }">
        <el-radio v-model="row.permissionType" :label="PermissionType.隐藏">
          <template #default>
            <span style="display: none;">.</span>
          </template>
        </el-radio>
      </template>
    </el-table-column>
  </el-table>
</template>
